<template>
  <xn-dialog custom-class="change-user-dialog" title="切换用户" :visible.sync="selfVisible" @close="onDialogHide">
    <el-scrollbar class="content">
      <div class="scroll-wrapper" :infinite-scroll-distance="10">
        <div v-for="(item, idx) in userList" :key="item.id" class="user-item">
          <el-radio v-model="activedId" :label="item.id">
            <div class="user-info">
              <div class="user-name">{{ item.userName }}</div>
              <div class="post-name">{{ item.post }}</div>
            </div>
          </el-radio>
          <div class="opt-view">
            <el-button v-if="activedId !== item.id" type="text" class="delete-btn" @click="onDelete(item, idx)">
              删除
            </el-button>
            <el-button type="text" @click="onEdit(item)">修改</el-button>
          </div>
        </div>
        <div v-if="maxLimit && maxLimit > userList.length" class="user-item add-btn" @click="onAddUser">
          <span>添加用户</span>
        </div>
      </div>
    </el-scrollbar>
    <div class="footer" slot="footer">
      <el-button type="default" @click="selfVisible = false">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
    <edit-user-dialog
      :visible.sync="editDialogVisible"
      :edit-info="editUser"
      @edit-success="onEditSuccess"
      @add-success="onAddSuccess"></edit-user-dialog>
  </xn-dialog>
</template>
<script>
import { listUser, changeUserBook, delUserBook } from '@api/modules/user.js'
import XnDialog from '@com/xnDialog.vue'
import EditUserDialog from './EditUserDialog.vue'

export default {
  name: 'ChangeUserDialog',
  components: {
    XnDialog,
    EditUserDialog,
  },
  props: {
    visible: {
      type: Boolean,
    },
  },
  data() {
    return {
      selfVisible: false,
      userList: [],
      pageIdx: 1,
      pageSize: 10,
      totalPages: 0,
      loadingMore: false,
      activedId: null,
      editDialogVisible: false,
      editUser: null,
      oriActivedId: null,
      maxLimit: 2,
    }
  },
  computed: {},
  watch: {
    visible(visible) {
      this.selfVisible = visible
      if (visible) {
        this.listUser()
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
    onSubmit() {
      if (this.oriActivedId !== this.activedId) {
        changeUserBook(this.activedId).then(res => {
          if (res.status === 200) {
            this.$message.success('切换联络员成功！')
            this.selfVisible = false
            this.$emit('changed')
          }
        })
      } else {
        this.selfVisible = false
        this.$emit('changed')
      }
    },
    listUser() {
      this.activedId = null
      listUser(false).then(res => {
        if (res.status === 200) {
          this.userList = res.data
          const currUser = this.userList.find(item => item.isLogin === '1')
          if (currUser) {
            this.oriActivedId = currUser.id
            this.selectRow(currUser)
          }
        }
      })
    },
    selectRow(row) {
      if (row) {
        this.activedId = row.id
      }
    },
    onAddUser() {
      this.editUser = null
      this.editDialogVisible = true
    },
    onEditSuccess(editInfo) {
      for (const key in editInfo) {
        this.editUser[key] = editInfo[key]
      }
    },
    onAddSuccess() {
      this.listUser()
    },
    onEdit(userItem) {
      this.editUser = userItem
      this.editDialogVisible = true
    },
    onDelete(userItem, idx) {
      this.$confirm('确定要删除该联络员信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delUserBook(userItem.id).then(res => {
            if (res.status === 200) {
              this.$message.success('删除成功！')
              this.userList.splice(idx, 1)
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.change-user-dialog {
  ::v-deep &.el-dialog {
    height: 375px;
    width: 500px !important;
  }
  .content {
    height: 100%;
    background: #f7f7f7;
    .scroll-wrapper {
      padding: 20px;
    }
    .user-item {
      height: 80px;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      padding: 20px;
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      &.add-btn {
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        color: #2c63b0;
      }
      .el-radio {
        flex: 1;
      }

      .user-info {
        display: inline-flex;
        flex-direction: column;
        .user-name {
          font-size: 16px;
          font-weight: bold;
        }
        .post-name {
          color: #888;
          font-size: 14px;
          margin-top: 8px;
        }
      }
      .opt-view {
        text-align: right;
        .delete-btn {
          color: #fc6969;
        }
      }
    }
  }
}
</style>
